<template>
	<div class="view">
		<!-- 头部 -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-20 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_title">目录管理</div>
		</div>
		<!-- 头部 end -->

		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{height:height+'px'}">
				<div class="line" style="margin-bottom: 20px;">
					<div class="line_title">目录列表</div>
					<div class="line_btn">
						<el-button icon="el-icon-plus" type="text" @click="to_add">添加目录</el-button>
					</div>
				</div>
				<el-tree :data="sort_list" node-key="id" default-expand-all :expand-on-click-node="true"
					:props="defaultprop">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>{{ data.sort }}</span>
						<span style="margin-left: 100px;">
							<el-button type="text" icon="el-icon-edit-outline" @click="() => edit(data)" v-if="data.parentid!=0">
								修改
							</el-button>
							<el-button type="text" icon="el-icon-delete" @click="() => remove(node, data)" v-if="data.parentid!=0">
								删除
							</el-button>
						</span>
					</span>
				</el-tree>
			</div>
		</div>
		<!-- 主体部分 end -->

	</div>
</template>

<script>
	export default {
		data() {

			return {
				height: document.documentElement.clientHeight - 104,
				sort_list: [],
				defaultprop: {
					children: 'catalogTreeVos',
					label: 'sort'
				},
				name:this.$root.ptName,
				picdir:this.$root.ptPicdir
			}
		},
		methods: {
			// 退出登录
			loginSelect(val) {
				if (val == 'exit') {
					localStorage.removeItem('token')
					this.$router.push('/sign_in')
				}
			},
			// 加载目录列表
			data_init() {

				this.$http({
					'method': 'get',
					'url': this.$api.cataList
				}).then(res => {
					if (res.data.code == 20000) {
						this.sort_list = res.data.data.items
						console.log(this.sort_list)
					}
				})

			},

			// 跳转修改
			edit(data) {
				this.$store.commit("setUrlParma",{id:data.id})
				this.$router.push('/sort/update')
			},

			// 删除
			remove(node, data) {
				this.$confirm('是否删除这条目录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						'method': 'get',
						'url': this.$api.cataRemove + data.id
					}).then(res => {
						if (res.data.code == 20000) {
							this.$message({
								type: 'success',
								message: res.data.message
							});
							this.data_init()
						} else {
							this.$message.error(res.data.message)
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			to_exit() {
				this.$router.go(-1)
			},
			to_add() {
				localStorage.removeItem('sort_id')
				this.$router.push('/sort/add')
			},


		},
		created() {
			this.data_init()
		}
	}
</script>

<style scoped>
	@import url("../../assets/css/infoSort.css");
	.h_user *{
		cursor: pointer;
	}
</style>
